<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath %>">
<%@include file="/views/global/ShopInclude.jsp" %>
<link type="text/css" rel="stylesheet" href="static/css/page/index.css" />
<title>SeaHello</title>
</head>
<body class="homebody">
<%@include file="/views/global/SearchBar.jsp" %>

<!-- 轮播banner  -->
<div class="banner">
  <div class="main_visual">
	<div class="flicking_con">
	     <c:forEach var="item" items="${indexHeadList}" varStatus="status">
		     <a href="#">${status.index+1 }</a> 
		</c:forEach>
	</div>
	<div class="main_image">
		<ul>
		   <c:forEach var="item" items="${indexHeadList}" >
		     <li><span style="background:url(${fileServerBasePath }download/${item.fileId}) center top no-repeat;"></span></li> 
		   </c:forEach>
		</ul>
		<a href="javascript:;" class="btn_prev"></a>
		<a href="javascript:;" class="btn_next"></a>
	</div>
  </div>
</div>
<!-- 轮播banner 结束  -->


<!-- hot sales 商品热卖  -->
<div class="hotSale">
  <a href="item/list" style="text-decoration: none;"><div class="font hotSaleTitle en_LM fontColorGray">老外·HOT SALE·私藏</div></a>
  <div class="hotSaleStreamImages contentWidth center">
    <div class="hotSalesLeft left">
    <c:if test="${not empty hotsale1 }">
     <div class="streamImage1 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale1.customUrl}');">  <!-- hotSale 第一张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale1.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle1 en_LM font fontColorWhite">${hotsale1.title}&nbsp;${hotsale1.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale1.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale1.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale1.storeName}</div>
        <div class="hotSalerArea en_M font fontColorWhite left">${hotsale1.continentName}</div>
      </div>
    </div>
    </c:if>
   <c:if test="${not empty hotsale2 }">
   <div class="streamImage2 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale2.customUrl}');">  <!-- hotSale 第二张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale1.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle2 en_LM font fontColorWhite">${hotsale2.title}&nbsp;${hotsale2.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale2.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale2.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale2.storeName}</div>
        <div class="hotSalerArea en_M font fontColorWhite left">${hotsale2.continentName}</div>
      </div>
    </div>
   </c:if>
    
    </div>
    
    <div class="hotSalesMiddle left">
    <c:if test="${not empty hotsale3 }">
    <div class="streamImage3 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale3.customUrl}');">  <!-- hotSale 第三张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale1.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle3 en_LM font fontColorWhite">${hotsale3.title}&nbsp;${hotsale3.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale3.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale3.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale3.storeName}</div>
        <div class="hotSalerArea en_M font fontColorWhite left">${hotsale3.continentName}</div>
      </div>
    </div>
    </c:if>
     <c:if test="${not empty hotsale4 }">
    <div class="streamImage4 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale4.customUrl}');">  <!-- hotSale 第四张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale4.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle4 en_LM font fontColorWhite">${hotsale4.title}&nbsp;${hotsale4.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale4.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale4.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale4.storeName}</div>
        <div class="hotSalerArea en_M font fontColorWhite left">${hotsale4.continentName}</div>
      </div>
    </div>
    </c:if>
    </div>
    
    <div class="hotSalesMiddle2 left">
     <c:if test="${not empty hotsale5 }">
    <div class="streamImage5 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale5.customUrl}');">  <!-- hotSale 第五张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale5.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle5 en_LM font fontColorWhite">${hotsale5.title}&nbsp;${hotsale5.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale5.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale5.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale5.storeName}</div>
        <div class="hotSalerArea2 en_M font fontColorWhite left">${hotsale5.continentName}</div>
      </div>
    </div>
    </c:if>
    <c:if test="${not empty hotsale6 }">
    <div class="streamImage6 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale6.customUrl}');">  <!-- hotSale 第六张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale6.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle6 en_LM font fontColorWhite">${hotsale6.title}&nbsp;${hotsale6.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale6.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale6.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale6.storeName}</div>
        <div class="hotSalerArea2 en_M font fontColorWhite left">${hotsale6.continentName}</div>
      </div>
    </div>
    </c:if>
    <c:if test="${not empty hotsale7 }">
    <div class="streamImage7 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale7.customUrl}');">  <!-- hotSale 第七张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale7.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle7 en_LM font fontColorWhite">${hotsale7.title}&nbsp;${hotsale7.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale7.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale7.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale7.storeName}</div>
        <div class="hotSalerArea2 en_M font fontColorWhite left">${hotsale7.continentName}</div>
      </div>
    </div>
    </c:if>
    </div>
    
    <div class="hotSalesRight right">
     <c:if test="${not empty hotsale8 }">
    <div class="streamImage8 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale8.customUrl}');">  <!-- hotSale 第八张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale8.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle8 en_LM font fontColorWhite">${hotsale8.title}&nbsp;${hotsale8.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale8.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale8.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale8.storeName}</div>
        <div class="hotSalerArea en_M font fontColorWhite left">${hotsale8.continentName}</div>
      </div>
    </div>
    </c:if>
    <c:if test="${not empty hotsale9 }">
    <div class="streamImage9 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale9.customUrl}');">  <!-- hotSale 第九张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale9.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle9 en_LM font fontColorWhite">${hotsale9.title}&nbsp;${hotsale9.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale9.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale9.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale9.storeName}</div>
        <div class="hotSalerArea en_M font fontColorWhite left">${hotsale9.continentName}</div>
      </div>
    </div>
    </c:if>
    <c:if test="${not empty hotsale10 }">
    <div class="streamImage10 streamImage" style="background-image: url('${fileServerBasePath }download/${hotsale10.customUrl}');">  <!-- hotSale 第十张图 -->
      <div class="streamImageTransparent" onclick="window.location.href='${hotsale10.path}';return false">
        <div class="hotSaleItemTitle hotSaleItemTitle10 en_LM font fontColorWhite">${hotsale10.title}&nbsp;${hotsale10.cnName}</div>
        <div class="hotSaleItemPrice en_LM font fontColorWhite">¥ ${hotsale10.price}</div>
        <div class="hotSalerPhoto left" style="background-size: 100% 100%;background-image: url('${fileServerBasePath }image/resize/${hotsale10.sellerFileId}?width=80&height=80');"></div>
        <div class="hotSalerName en_M font fontColorWhite left">${hotsale10.storeName}</div>
        <div class="hotSalerArea en_M font fontColorWhite left">${hotsale10.continentName}</div>
      </div>
    </div>
    </c:if>
    </div>
  </div>
</div>
<div class="saleReadMore contentWidth center font en_M fontColorGray"><a class="readMore" href="item/list">READ MORE 查看更多</a></div>
<!-- hot sales 商品热卖结束  -->


<!-- hot shops  -->
<div class="hotShop">
  <a href="seller/shops" style="text-decoration: none;"><div class="font hotShopTitle en_LM fontColorGray">老外·HOT SHOP·店铺</div></a>
  <div class="shops contentWidth center row"> 
	  ${hotShops }
  </div>
</div>
<div class="saleReadMore contentWidth center font en_M fontColorGray"><a class="readMore" href="seller/shops" style="margin-top: -67px;">READ MORE 查看更多</a></div>
<!-- hot shops 结束  -->

<!-- independent brands  -->
<div class="independentBrand contentWidth center">
  <a href="seller/brands" style="text-decoration: none;"><div class="font independentBrandTitle en_LM fontColorGray">品牌·BRANDS·推荐</div></a>
  <div class="infoBoardForBrand">
    <div class="index-advertisement">
    	<c:forEach var="item" items="${indexAdveList }">
    		<img width="1200" height="160" src="${fileServerBasePath }download/${item.fileId}"/>
    	</c:forEach>
    </div>
    <div id="brandContentList" class="brandBoard contentWidth center">
    </div>
  </div>
  <div class="brandReadMore contentWidth center font en_M fontColorGray"><a class="readMore" href="seller/brands">READ MORE 查看更多</a></div>
</div>

<!-- independent brands 结束  -->

<!-- designers  -->
<div class="scroll-outer center">
	<div id="designerContentList" class="scroll">
	</div>
	<div class="insellerTransparentLeft insellerTransparent"></div>
    <div class="designerIdentify"><img src="static/images/page/index/designerIdentify.png"/></div> <!-- 这是保持位置不变的绿色designer图片 -->
    <div class="insellerTransparent insellerTransparentRight"></div>
</div>
<div class="designerReadMore contentWidth center font en_M fontColorGray"><a class="readMore" href="seller/inseller">READ MORE 查看更多</a></div>
<!-- designers 结束  -->

<!-- 便签 -->
<!-- <div class="noteup"><a href="javascript:void(0)" onclick="$('.home-note').toggle();">内测须知<br /><p>NOTICE</p></a></div>
<div class="notedown"><a href="javascript:void(0)">内测留言<br />TEST ADVICE</a></div>
<div class="home-note">
<p style="padding-left: 63px;">SEAHELLO 内测须知 </p>
<p>1、SEAHELLO首轮内测，我们将开放100位内测名额。 </p>
<p>2、网站灰色功能将于第二期上线，敬请期待。 </p>
<p>3、发表内测建议请至【内测留言】板块，感谢您的参与！ </p>
<br />
<p>2015年4月10日  SEAHELLO团队 </p>
</div> -->
<!-- 便签 结束 -->

<%@include file="/views/global/scripts.jsp" %>
<%@include file="/views/global/footer.jsp" %>
<form id="submitForm" name="submitForm" action="item/list" method="post">
	<input type="hidden" name="pageIndex" value="1" />
	<input type="hidden" name="categoryIdPath" value="${searchVo.categoryIdPath }"/>
	<input type="hidden" name="countryId" value="${searchVo.countryId }"/>
	<input type="hidden" name="orderBy" value="${searchVo.orderBy }"/>
	<input type="hidden" name="order" value="${searchVo.order }"/>
</form>

<script type="text/javascript" src="static/javascript/jquery.touchSlider.js"></script>
<script type="text/javascript" src="static/javascript/page/index.js"></script>
<script type="text/javascript" src="static/javascript/jquery.plugin/jquery.scrollpic.js"></script>
<script type="text/javascript">
$(function(){
	ajaxhtml("#brandContentList", "/brandListWindow");
	ajaxhtml("#designerContentList", "/designerFirstListWindow", function(){
		  var scrollPic = new ScrollPic();
			scrollPic.scrollContId   = "designerContentList"; //内容容器ID
			/* scrollPic.arrLeftId      = "arrLeft";//左箭头ID
			scrollPic.arrRightId     = "arrRight"; //右箭头ID */
			scrollPic.frameWidth     = 1000;//显示框宽度
			scrollPic.pageWidth      = 200; //翻页宽度
			scrollPic.speed          = 8; //移动速度(单位毫秒，越小越快)
			scrollPic.space          = 8; //每次移动像素(单位px，越大越快)
			scrollPic.autoPlay       = true; //自动播放
			scrollPic.autoPlayTime   = 2; //自动播放间隔时间(秒)
			scrollPic.initialize(); //初始化
	});
});
function fetchNextItems(divId, pageNo){
	$("INPUT[name='pageIndex']", "#submitForm").val(pageNo);
	$("#submitForm").goAjax({
		url:"getHotShopNextItems",
		type: "POST",
		semantic:false,
		dataType: "html",
		data:{divId:divId, userId:$("#"+divId).attr("userId")},
		success: function(data) {
			$("#"+divId).html(data);
		}
	});
}

function showhomenote(){
	$(".noteup").toggle(
	 function(){
		/* $(target).animate({left:"10px"}); */
		$('.home-note').show();
	 },function(){
		 /* $(target).animate({right:"10px"}); */
		 $('.home-note').hide();
	 });
}

function shopFavorite(target, sellerId){
	$("#submitForm").goAjax({
		url:"seller/statistics/like",
		type: "POST",
		semantic:false,
		checkLogin: true,
		dataType: "json",
		data:{sellerId: sellerId},
		success:function(jsonData){
			if(false == jsonData.success){
				$.error(jsonData.message);
			} else {
				var divId = "hotShopUnit" + sellerId;
				var pageNo = $("INPUT[name='pageIndex']", "#submitForm").val();
				fetchNextItems(divId, pageNo);
			}
		}
	});
}
</script>
</body>
</html>
